import 'dart:developer';

import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:guochaoapp/common/widges/appbar.dart';
import 'package:guochaoapp/controller/home/benchmarkdetail_controller.dart';
import 'package:guochaoapp/model/benchmark_entity.dart';
import 'package:guochaoapp/model/productbrand_entity.dart';
import 'package:guochaoapp/r.dart';

class GCBenchMarkDetailPage extends StatelessWidget {
  final c = Get.put(GCBenchMarkDetailController());

  @override
  Widget build(BuildContext context) {
    c.requestProductBrand();
    return Scaffold(
      appBar: GCAppBar(titleText: "最近价格涨跌"),
      body: _initSubViews(),
    );
  }

  _initSubViews() {
    return ListView(children: [
      _topToolsBar(),
      Container(height: 1, color: Color(0x0A40A8B3)),
      _linechartView(),
      Obx(()=> _priceChangeView()),
    ]);
  }

  _topToolsBar() {
    return Container(
      height: 40,
      color: Colors.white,
      child: Row(children: [
        SizedBox(width: 34),
        GestureDetector(
          onTap: c.benchmarkSelected,
          child: Container(
              width: 66,
              child: Column(
                children: [
                  Container(
                    height: 39,
                    child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Text(
                            Get.arguments[0][0].brandName,
                            style: TextStyle(
                                fontSize: 18,
                                color: Get.context.theme.primaryColor),
                          ),
                          Icon(Icons.keyboard_arrow_down,
                              color: Get.context.theme.primaryColor)
                        ]),
                  ),
                  Container(
                    height: 1,
                    color: Get.context.theme.primaryColor,
                  )
                ],
              )),
        ),
        Expanded(child: SizedBox()),
        GestureDetector(
          onTap: c.daySelected,
          child: Container(
            height: 39,
            child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Obx(() => Text(
                        c.days[c.daysIndex.value],
                        style: TextStyle(
                            fontSize: 18,
                            color: Get.context.theme.primaryColor),
                      )),
                  SizedBox(width: 5),
                  Icon(Icons.keyboard_arrow_down,
                      size: 18, color: Get.context.theme.primaryColor)
                ]),
          ),
        ),
        SizedBox(width: 21),
      ]),
    );
  }

  _linechartView() {
    RxList<BenchmarkData> params = Get.arguments[1];

    return Container(
        height: 275,
        child: Container(
          color: Colors.white, // 底色
          child: Obx(()=> Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisAlignment: MainAxisAlignment.start,
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              SizedBox(height: 10),
              Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  const SizedBox(
                    width: 27,
                  ),
                  const Text(
                    '最新价格',
                    style: TextStyle(color: Color(0xFF333333), fontSize: 16, fontWeight: FontWeight.w500),
                  ),
                  Expanded(child: SizedBox()),
                  Text(
                    params[1].createAt,
                    style: TextStyle(color: Color(0xFF5C5C5C), fontSize: 14,fontWeight: FontWeight.w500),
                  ),
                  const SizedBox(width: 21),
                ],
              ),
              Container(
                height: 50,
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisSize: MainAxisSize.min,
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: <Widget>[
                    const SizedBox(
                      width: 27,
                    ),
                    Text(
                      "¥" + params[0].currentBenchmark.toString(),
                      style: TextStyle(
                          color: Color(0xFFF75554),
                          fontSize: 36,
                          fontWeight: FontWeight.bold),
                    ),
                    Expanded(child: SizedBox()),
                    Row(
                      children: [
                        Text(
                          params[0].changeTotal.toString(),
                          style: TextStyle(
                              color: Color(0xFFF75554),
                              fontSize: 24,
                              fontWeight: FontWeight.bold),
                        ),
                        Column(
                          children: [
                            Icon(Icons.arrow_upward, color: Color(0xFFF75554)),
                            SizedBox(height: 20)
                          ],
                        )
                      ],
                    ),
                    const SizedBox(width: 39),
                  ],
                ),
              ),
              const SizedBox(
                height: 10,
              ),
              Expanded(
                child: AspectRatio(
                  aspectRatio: 1.70,
                  child: Container(
                    color: Colors.white,
                    child: Padding(
                        padding: const EdgeInsets.only(left: 18.0, right: 18.0),
                        child: Obx(() {
                          if (c.flspotList.length > 0) {
                            return LineChart(
                              mainData(),
                            );
                          } else {
                            return Container();
                          }
                        })
                    ),
                  ),
                ),
              ),
              SizedBox(height: 14),
            ],
          ),)
        ));
  }

  LineChartData mainData() {
    return LineChartData(
      gridData: FlGridData(
        show: true,
        verticalInterval: 3,
        drawVerticalLine: true,
        getDrawingHorizontalLine: (value) {
          return FlLine(
            color: const Color(0xffF1F4F7),
            strokeWidth: 1,
          );
        },
        getDrawingVerticalLine: (value) {
          return FlLine(
            color: const Color(0xffF1F4F7),
            strokeWidth: 1,
          );
        },
      ),
      titlesData: FlTitlesData(
        show: true,
        bottomTitles: SideTitles(
          showTitles: true,
          reservedSize: 22,
          getTextStyles: (value) => const TextStyle(
              color: Color(0x88238189),
              fontWeight: FontWeight.w400,
              fontSize: 8),
          getTitles: (value) {
            log(value.toString());
            int intValue = value.toInt();
            if(intValue % 3 == 0) {
              return c.benchmarkList[intValue].createAt.substring(5);
            }
          },
          margin: 8,
        ),
        leftTitles: SideTitles(
          showTitles: true,
          getTextStyles: (value) => const TextStyle(
            color: Color(0x88238189),
            fontWeight: FontWeight.w400,
            fontSize: 12,
          ),
          getTitles: (value) {
            return (value * 1000).toInt().toString();
          },
          reservedSize: 28,
          margin: 12,
        ),
      ),
      borderData: FlBorderData(
          show: true,
          border: Border.all(color: const Color(0xffF1F4F7), width: 1)),
      minX: 0,
      maxX: double.parse(c.days[c.daysIndex.value]) - 1, //11列
      minY: 0,
      maxY: 5, //5行
      lineBarsData: [
        LineChartBarData(
          spots: c.flspotList,
          isCurved: false,
          colors: [
            Color(0xff238189),
          ],
          barWidth: 2,
          isStrokeCapRound: true,
          dotData: FlDotData(
            show: false,
          ),
          belowBarData: BarAreaData(
            show: true,
            gradientFrom: Offset(0, 1),
            gradientTo: Offset(0, 0),
//            cutOffY: 1,
//            applyCutOffY: true,
            colors: [
              Color(0xff238189).withOpacity(0.01),
              Color(0xff238189).withOpacity(0.2),
            ],
          ),
        ),
      ],
    );
  }

  _priceChangeView() {
    return Column(
      children: [
        Container(
          color: Colors.white,
          child: Row(
            children: [
              SizedBox(width: 8),
              Text("价格变动信息",
                  style: TextStyle(
                      color: Color(0xFF333333),
                      fontSize: ScreenUtil().setSp(14),
                      fontWeight: FontWeight.bold))
            ],
          ),
        ),
        ListView.builder(
          itemCount: c.benchmarkList.length,
          itemBuilder: (context, index) {
            return _priveChangeItem(c.benchmarkList[index].createAt, c.benchmarkList[index].currentBenchmark);
          },
          shrinkWrap: true,
          physics: NeverScrollableScrollPhysics(),
        ),
      ],
    );
  }

  _priveChangeItem(String time, double price) {
    return Container(
      color: Colors.white,
      padding: EdgeInsets.only(left: 8, right: 8),
      height: 43,
      child: Column(
        children: [
          Expanded(
            child: Row(
              children: [
                Text(time,
                    style: TextStyle(
                        color: Color(0xFF525252),
                        fontSize: ScreenUtil().setSp(16),
                        )),
                Expanded(child: SizedBox()),
                _getUpOrDownImage(price),
                SizedBox(width: 10),
                Text("¥" + price.toString(),
                    style: TextStyle(
                      color: _getUpOrDownColor(price),
                      fontSize: ScreenUtil().setSp(16),
                      fontWeight: FontWeight.bold
                    )),
              ],
            ),
          ),
          Container(color: Color(0xFFE8E8E8), height: 1),
        ],
      ),
    );
  }
  
  Color _getUpOrDownColor(double price) {
    RxList<BenchmarkData> params = Get.arguments[1];
    if(price < params[0].currentBenchmark) {
      return Color(0xFF238189);
    } else if(price > params[0].currentBenchmark) {
      return Color(0xFFF55C5C);
    } else {
      return Colors.black;
    }
  }

  _getUpOrDownImage(double price) {
    RxList<BenchmarkData> params = Get.arguments[1];
      if(price < params[0].currentBenchmark) {
        return Image.asset(R.assetsIconDetailPricedown, width: 12,height: 15);
      } else if(price > params[0].currentBenchmark) {
        return Image.asset(R.assetsIconDetailPriceup, width: 12,height: 15);
      } else {
        return SizedBox();
      }

  }
}
